<template>
  <!-- 使用插值表达式获取数据时, 不需要.value, vue已经自动去取了 -->
  <h1 v-show="p.name">姓名: {{p.name}}</h1>
  <h1>年龄: {{p.age}}</h1>
  <h1 v-show="p.sex">性别: {{p.sex}}</h1>

  <button @click="addSex">添加sex属性</button>
  <br>
  <br>
  <button @click="deleteName">删除name属性</button>

</template>

<script>
  import { ref, reactive } from 'vue';

  export default {
  	name: 'App',
    setup() {
  		let person = {
  			name: 'zs',
        age: 19,
      };
  		// reactive 定义对象类型的响应式数据
  		let p = reactive(person);

			/**
       * 添加sex 属性
			 */
			function addSex() {
        p.sex = '女';
				console.log(p);
			}

			/**
       * 删除name 属性
			 */
			function deleteName() {
        delete p.name
			}

      return {
  			p,
        addSex,
        deleteName
      }
    },
  }
</script>

<style>

</style>
